<template>
  <div class="chartBox">
    <eChart :option="option"></eChart>
  </div>
</template>

<script>
  export default {
    name: 'itemRight1',
    components: {},
    data() {
      return {
        option: {}
      }
    },
    mounted() {
      this.option = this.getOption()
    },
    methods: {
      getOption() {
        let roseData = [
          { value: 200, name: '杭州' },
          { value: 120, name: '宁波' },
          { value: 98, name: '温州' },
          { value: 88, name: '绍兴' },
          { value: 70, name: '台州' },
          { value: 150, name: '某某' },
          { value: 120, name: '某某' },
          { value: 100, name: '某某' },
          { value: 200, name: '某某' },
          { value: 90, name: '某某' }
        ]

        const colors = ['#019FC7', '#028CBE', '#0282B8', '#027AB3', '#025BA1', '#025BA1', '#02519B', '#024392', '#024191', '#024091'];
        for (let index = 0; index < roseData.length; index++) {
          roseData[index].itemStyle = {
            color: colors[index],
            borderWidth: '2',
            borderColor: 'rgba(6,18,44,0.65)',
          };
        }

        const originDataLen = roseData.length;
        const spanAngle = 180; // 需要显示的角度
        const repeatedMultiple = 360 / spanAngle;
        // 这里根据要显示的角度 计算了需要插入的数据量
        const addDataLen = parseInt((repeatedMultiple - 1) * originDataLen);
        for (let index = 0; index < addDataLen; index++) {
          roseData.push({
            name: null,
            // 这里给数据置零，即在视觉上不显示
            value: 0,
            // 这里保证了异常情况下(数据都为0时)作为占位的数据在视觉上仍为不可见状态。
            itemStyle: {
              color: 'rgba(0,0,0,0)',

            },
          });
        }
        return {
          "color": [
            "#9fe6b8",
            "#32c5e9",
            "#5eb5fc",
            "#1d9dff",
            "#8378ea",
            "#aa6eff",
            "#e7bcf3",
            "#fb7293",
            "#ff9f7f",
            "#ffdb5c"
          ],
          tooltip: {
            show: true,

            trigger: 'item',
            backgroundColor: 'rgba(6, 30, 61, 0.32)', // 背景颜色
            borderColor: '#053170', // 边框颜色
            borderWidth: 1, // 边框宽度
            textStyle: {
              color: '#fff', // 文本颜色
              fontSize: 13,
            },
            formatter: '{b}: {c} ({d}%)',
          },
          "series": [
            {
              "name": "",
              "type": "pie",
              "roseType": "area",
              "radius": [
                "30%",
                "120%"
              ],
              "center": [
                "50%",
                "81.3%"
              ],
              "startAngle": 180,
              "label": {
                "show": false
              },
              "data": roseData
            },
            {
              type: 'gauge',
              radius: '100%',
              center: ['50%', '90%'],
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 1,
              splitNumber: 20,
              axisLine: {
                show: false,
                lineStyle: {
                  width: 1,
                  color: [
                    [1, '#213d85']
                  ]
                }
              },
              axisTick: {
                show: false,
                length: 0,
                lineStyle: {
                  color: 'auto',
                  width: 1
                }
              },
              splitLine: {
                length: '0',
                lineStyle: {
                  color: 'auto',
                  width: 1
                }
              },
              axisLabel: {
                color: '#fff',
                distance: -106,
                formatter: function (value) {
                  if (value === 0.05) {
                    return `${value}%` + ' 杭州';
                  }
                  else if (value === 0.15) {
                    return `${value}%` + ' 宁波';
                  }
                  else if (value === 0.25) {
                    return `${value}%` + ' 温州';
                  }
                  else if (value === 0.35) {
                    return `${value}%` + ' 绍兴';
                  }
                  else if (value === 0.45) {
                    return `${value}%` + '台州';
                  }
                  else if (value === 0.55) {
                    return '某某 ' + `${value}%`;
                  }
                  else if (value === 0.65) {
                    return '某某 ' + `${value}%`;
                  }
                  else if (value === 0.75) {
                    return '某某 ' + `${value}%`;
                  }
                  else if (value === 0.85) {
                    return '某某 ' + `${value}%`;
                  }
                  else if (value === 0.95) {
                    return '某某 ' + `${value}%`;
                  }
                }
              },
              title: {
                offsetCenter: ['0%', '0%'],
                fontSize: 12
              },
              detail: {
                fontSize: 12,
                offsetCenter: [0, '0%'],
                color: 'auto'
              },
              data: [],
            },
          ]
        };
      }
    }
  }
</script>

<style scoped lang="scss">
.chartBox {
  height: 235px;
  margin-top: 6px;
  background: url('~@/assets/img/sectorbg.svg') center 35px no-repeat;
  position: relative;
}
</style>
